<template>
  <view class="selectCharacter">
    <view class="pageContainer">
      <view class="selector">
        <view
          class="selectBtn"
          v-for="(item, index) in tagList"
          :key="index"
          @click="selectRole(index)"
          :class="{ selected: flag == index }"
        >
          <image :src="item.src" mode="aspectFit" :key="index" class="image" />
          <view class="title">{{ item.roles }}</view>
        </view>
      </view>
      <view class="enterBtn">
        <button class="enter" @click="selectRoleAlready()">进入</button>
      </view>
      <u-top-tips ref="chooseRole"></u-top-tips>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      flag: -1,
      tagList: [
        {
          roles: "学习者",
          src: "../../static/sitting.png",
          // src: "https://www.z4a.net/images/2021/09/03/sitting-22x0a1395287c85d11e.png",
        },
        {
          roles: "采集者",
          src: "../../static/standing.png",
          // src: "https://www.z4a.net/images/2021/09/03/standing-162x.png",
        },
      ],
    };
  },
  methods: {
    selectRole(index) {
      this.flag = index;
    },
    selectRoleAlready() {
      if (this.flag === -1) {
        this.$refs.chooseRole.show({
          title: "请选择一个角色哦",
        });
      } else {
        // flag为0表示学习者，flag为1表示采集者
        uni.setStorageSync("role_key", this.flag);
        uni.reLaunch({
          url: "../writeInfo/writeInfo",
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
/* 考虑到跨端兼容，还是使用flex布局 */
.selectCharacter {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  .pageContainer {
    margin-top: 40rpx;
    .selector {
      width: 90vw;
      height: 80vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 2%;
      font-weight: normal;
      .selectBtn {
        height: 500rpx;
        width: 500rpx;
        padding: 6%;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 100rpx;
        .title {
          margin-top: 20rpx;
          font-size: 40rpx;
          font-weight: bold;
          letter-spacing: 1px;
        }
      }
      .selected {
        color: #333333;
        background-color: rgba(136, 3, 30, 0.2);
      }
    }
    .enterBtn {
      display: flex;
      align-items: center;
      .enter {
        width: 55vw;
        background-color: rgba(136, 3, 30, 1);
        color: #fff;
      }
    }
  }
}
</style>
